import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import StyledComponentsRegistry from '../lib/registry';
import Script from "next/script";

const geistSans = Geist({
  subsets: ["latin"],
  variable: "--font-geist-sans",
});

const geistMono = Geist_Mono({
  subsets: ["latin"],
  variable: "--font-geist-mono",
});

export const metadata: Metadata = {
  title: "江门市空域链低空智能管理系统",
  description: "基于低空空域管控中心功能的智慧城市数据大屏",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="zh-CN">
      <head>
        {/* 添加Cesium样式 */}
        <link href="/cesium/Widgets/widgets.css" rel="stylesheet" />
        
        {/* 预先加载Cesium初始化脚本 */}
        <Script 
          src="/cesium-init.js" 
          strategy="beforeInteractive"
          id="cesium-init"
        />
        
        {/* 优先加载Cesium主脚本 */}
        <Script 
          src="/cesium/Cesium.js" 
          strategy="beforeInteractive"
          id="cesium-main-script"
        />
        
        {/* 确保Cesium在错误时可恢复 */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.addEventListener('error', function(event) {
                if (event.message && event.message.includes('Cesium is not defined')) {
                  console.warn('检测到 Cesium 未定义错误，尝试恢复...');
                  if (window.reloadCesium && typeof window.reloadCesium === 'function') {
                    window.reloadCesium();
                  }
                }
              }, true);
            `
          }}
        />
      </head>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <StyledComponentsRegistry>
          {children}
        </StyledComponentsRegistry>
      </body>
    </html>
  );
}